<template>
  <div class="message-panel-container">
    <div class="message-panel-header">
      <div class="message-panel-header_title">
        {{
          type == typeMap.messageType.XY_MESSAGE
            ? '小易通知'
            : item.messageTitle
        }}
      </div>
      <div class="message-panel-header_time">{{ item.createTime || '' }}</div>
    </div>
    <div class="message-panel-body">
      <template v-if="type == typeMap.messageType.XY_MESSAGE">
        <div class="message-panel-body_title">
          {{ item.title || '小易通知' }}
        </div>
        <div class="message-panel-body_content">{{ item.content || '' }}</div>
      </template>
      <template v-else>
        <div class="message-panel-body_second_title">
          {{ item.messageSecondTitle || '' }}
        </div>
      </template>
      <template v-if="type != typeMap.messageType.XY_MESSAGE">
        <div class="message-panel-body_message_conent">
          <div
            v-for="content in item.messageContent"
            :key="content.messageKey"
            :class="{
              'message-panel-body_message_text':
                type != typeMap.messageType.SHARE_ALARM,
            }"
          >
            <label>{{ `${content.messageKey}: ` }}</label
            >{{ content.messageValue }}
          </div>
          <div v-for="(link, index) in item.messageLinkList" :key="index">
            <div v-if="link.linkType === typeMap.linkType.LOSS_CONTACT_PG">
              <a :href="`/#/device/detail/${link.stationId}`"
                >{{ link.linkName }}></a
              >
            </div>
            <div v-if="link.linkType === typeMap.linkType.FAULT_PG">
              <a :href="`/#/device/detail/${link.stationId}/${link.deviceType}`"
                >{{ link.linkName }}></a
              >
            </div>
            <div v-if="link.linkType === typeMap.linkType.ACTIVE_DETAIL">
              <a :href="`/#/activity/detail/${link.actId}/${link.actType}`"
                >{{ link.linkName }}></a
              >
            </div>
            <div v-if="link.linkType === typeMap.linkType.ORDER_DETAIL">
              <a :href="`/#/order/detail/${link.billNum}`"
                >{{ link.linkName }}></a
              >
            </div>
            <div v-if="link.linkType === typeMap.linkType.TRANSACTION_DETAIL">
              <a
                :href="`/#/transation/detail/${link.paymentBillNum}?form=noticeList`"
                >{{ link.linkName }}></a
              >
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { typeMap } from '@/utils/format'
export default {
  name: 'MessagePanel',
  data() {
    return {
      typeMap,
    }
  },
  props: {
    type: {
      required: true,
      type: String,
    },
    item: {
      type: Object,
      default: () => {},
    },
  },
}
</script>
<style lang="scss" scoped>
.message-panel-container {
  background: #fff;
  width: 100%;
  border: none;
  color: #100625;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);
  border-radius: 4px;
  padding: 10px 20px 20px;
  min-height: 200px;

  .message-panel-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 10px;

    .message-panel-header_title {
      font-weight: lighter;
      font-size: 16px;
    }

    .message-panel-header_time {
      color: #9c9797;
      font-size: 14px;
    }
  }

  .message-panel-body {
    width: 100%;

    .message-panel-body_title {
      font-weight: bold;
      color: #272727;
      text-align: center;
      padding-top: 20px;
      padding-bottom: 20px;
    }

    .message-panel-body_second_title {
      font-size: 16px;
      font-weight: bold;
      padding: 10px 0;
    }

    .message-panel-body_content {
      color: #988ca4;
      font-size: 15px;
    }

    .message-panel-body_message_conent {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      font-size: 16px;

      .message-panel-body_message_text {
        min-width: 200px;
        width: 30%;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      div {
        label {
          font-weight: normal;
          color: #988ca4;
        }
      }

      a {
        color: #1a6deb;
      }
    }
  }
}
</style>
